<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="addGrade">添加</el-button>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="label_id" label="ID" width="100"></el-table-column>
            <el-table-column prop="label_name" label="标签名称" min-width="180"></el-table-column>
            <el-table-column prop="product_nums" label="商品关联数"></el-table-column>
            <el-table-column label="标签状态">
                <template #default="{ row }">
                    <span style="color: #4b93fa">{{ row.hidden == 0 ? "显示" : "隐藏" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updated_at_label" label="添加时间" min-width="180"></el-table-column>
            <el-table-column label="操作" width="230" class-name="operation-nav" fixed="right">
                <template #default="scope">
                    <el-button link type="primary" class="theme-btn" @click="clickEdit(scope.row)">编辑 </el-button>
                    <el-popconfirm
                        title="是否确定删除？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="clickDel(scope.row)"
                        v-if="scope.row.label_id > 3"
                    >
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogGrade"
            :title="grade_type == 1 ? '添加标签' : '编辑标签'"
            width="560px"
            :close-on-click-modal="false"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="closeGrade"
        >
            <el-form ref="ruleGradeRef" :model="ruleGradeForm" :rules="ruleCheckGrade" label-width="120px">
                <el-form-item label="标签名称" prop="grade_name">
                    <el-input v-model.trim="ruleGradeForm.grade_name" clearable placeholder="请输入标签名称" :disabled="grade_type == 2 && ruleGradeForm.id < 3" />
                </el-form-item>
                <el-form-item label="标签状态" prop="radio_type" required>
                    <el-radio-group v-model="ruleGradeForm.radio_type">
                        <el-radio label="0">显示</el-radio>
                        <el-radio label="1">隐藏</el-radio>
                    </el-radio-group>
                    <div class="input-tips">前端商品样式是否显示标签</div>
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitForm(ruleGradeRef)"> 确认 </el-button>
                        <el-button @click="resetForm(ruleGradeRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch, onBeforeUnmount } from "vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})
onBeforeUnmount(() => {})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("product/label/index", params)
}

/**
 * 添加/编辑属性值
 * @param {Boolean} dialogGrade 添加/编辑弹窗状态
 * @param {Boolean} form_loading 提交按钮状态
 * @param {Number} grade_type 1是添加，2是编辑
 * @param {Array} ruleGradeRef 表单规则
 * @param {Object} ruleGradeForm  表单字段
 * @param {Object} ruleCheckGrade  表单提示
 * @param {Function} submitForm 提交表单
 * @param {Function} closeGrade 关闭弹窗
 */
const dialogGrade = ref(false)
const grade_type = ref(1)
const form_loading = ref(false)
const ruleGradeRef = ref(null)
const ruleGradeForm = reactive({
    id: "",
    grade_name: "",
    radio_type: "0",
})
const ruleCheckGrade = reactive({
    grade_name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                label_name: ruleGradeForm.grade_name,
                hidden: ruleGradeForm.radio_type,
            }
            if (grade_type.value == 2) {
                data.label_id = ruleGradeForm.id
            }
            let url = grade_type.value == 1 ? "product/label/add" : "product/label/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogGrade.value = false
                        proxy.$message({ message: `${grade_type.value == 1 ? '添加成功！' : '编辑成功！'}`, type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const addGrade = () => {
    grade_type.value = 1
    dialogGrade.value = true
}
const clickEdit = (row) => {
    dialogGrade.value = true
    setTimeout(() => {
        grade_type.value = 2
        ruleGradeForm.id = row.label_id
        ruleGradeForm.grade_name = row.label_name
        ruleGradeForm.radio_type = String(row.hidden)
    }, 50)
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeGrade = () => {
    dialogGrade.value = false
    resetForm(ruleGradeRef.value)
}
// 删除
function clickDel(row) {
    proxy.$axios
        .post("product/label/delete", {
            label_id: row.label_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "GoodsTag",
}
</script>

<style lang="less" scoped></style>
